<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { navigateTo, showLoading } from '@tarojs/taro';
import { QUERY_APP_WORK_ORDER_LIST } from '/@/api/modules/order/app-work-order';
import IMG_ICON_COOPERATE from '/@/assets/image/icon/cooperate.png';
import IMG_ICON_SPEED from '/@/assets/image/icon/speed.png';
import {
  WORK_ORDER_STATUS,
  WORK_ORDER_STATUS_COLOR,
  WORK_ORDER_STATUS_BG_COLOR,
} from '/@/common/constant';
const state = reactive<{
  /**
   * 当前页
   */
  activePage: number;
  /**
   * 加载状态
   */
  loading: boolean;
  /**
   * 加载完成状态
   */
  finished: boolean;
  /**
   * 列表
   */
  list: AppSysWorkOrder.Dto[];
}>({
  activePage: 1,
  loading: false,
  finished: false,
  list: [],
});
/**
 * @description 列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;
  showLoading();
  QUERY_APP_WORK_ORDER_LIST({
    comQuery: { page, pageSize },
    status: ['task_receive', 'task_process', 'task_suspend', 'task_suspend_review'],
  })
    .then((res) => {
      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.workOrderDto || !res.workOrderDto.length) return;
      res.workOrderDto.forEach((item) => state.list.push(item));
      state.activePage += 1;
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}
onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
});
</script>
<template>
  <scroll-view
    class="app-page__wrapper"
    :scroll-y="true"
    :lower-threshold="100"
    @scrolltolower="onLoading()"
  >
    <view class="my-work-order-list">
      <view
        v-for="item in state.list"
        :key="item.id || ''"
        class="my-work-order-item"
        @click="
          navigateTo({
            url: `/pages/work-order/detail/index?id=${item.id}`,
          })
        "
      >
        <view class="my-work-order-item__header">
          <view class="my-work-order-item__header--left">
            <text class="my-work-order-item__code">{{ item.orderCode }}</text>
            <image
              v-if="item.hastenStatus === 2"
              class="my-work-order-item__icon"
              :src="IMG_ICON_SPEED"
            />
            <image
              v-if="item.cooperateStatus === 1"
              class="my-work-order-item__icon"
              :src="IMG_ICON_COOPERATE"
            />
          </view>
          <view class="my-work-order-item__header--right">
            <text
              class="my-work-order-item__status"
              :style="{
                color: item.status ? WORK_ORDER_STATUS_COLOR[item.status] : '#999',
                backgroundColor: item.status ? WORK_ORDER_STATUS_BG_COLOR[item.status] : '#999',
              }"
            >
              {{ item.status ? WORK_ORDER_STATUS[item.status] : '-' }}
            </text>
          </view>
        </view>
        <view class="my-work-order-item__description">
          <view class="my-work-order-item__description--left">
            <text class="nut-ellipsis">{{ item.description }}</text>
          </view>
        </view>
        <view>
          <nut-row>
            <nut-col span="12">
              <text>来源:&nbsp;&nbsp;</text>
              <text>{{ item.orderSourceName || '-' }}</text>
            </nut-col>
            <nut-col span="12">
              <text>创建人:&nbsp;&nbsp;</text>
              <text>{{ item.createUserName || '-' }}</text>
            </nut-col>
          </nut-row>
        </view>
        <view>
          <text>地点:&nbsp;&nbsp;</text>
          <text>
            {{ item.areaName || '-' }}
          </text>
        </view>
      </view>
    </view>

    <view class="app-page__list-tips">
      <text v-if="!state.list.length">暂无数据！</text>
      <text v-else-if="state.list.length && state.loading">加载中...</text>
      <text v-else-if="state.list.length && state.finished">加载完成!</text>
    </view>
  </scroll-view>
</template>
<style lang="scss">
.my-work-order-list {
  padding: 0 20px;

  .my-work-order-item {
    background-color: #fff;
    color: #999;
    padding: 20px 20px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 28px;
    font-weight: normal;

    &:last-child {
      margin-bottom: 20px;
    }

    &__icon {
      width: 25px;
      height: 25px;
      margin-left: 15px;
    }

    &__header {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      &--left {
        padding-right: 20px;
        flex: 1;
      }
    }

    &__code {
      color: #2c2c2c;
      font-weight: bold;
    }

    &__status {
      font-size: 20px;
      padding: 4px 12px;
      border-radius: 8px;

      &--hasten {
        color: #ee4e36;
        background-color: #fce5e1;
      }
    }

    &__description {
      display: flex;
      align-items: flex-start;
      color: #2c2c2c;
      font-weight: bold;

      &--left {
        padding-right: 20px;
        flex: 1;
      }
    }
  }
}
</style>
